<script setup lang="ts">
import { onMounted, ref, nextTick } from "@vue/runtime-core"
import { useRouter } from "vue-router"
import axios from "axios"

interface HotListType {
    color: string
    frontword: string
}

const router = useRouter()
const hotArr = ref<HotListType[]>([])
const frontwordSty = ref('')
const historyList = ref(Array(''))
const querys = ref('')

const getHotList = () => {
    axios
        .get('https://apis.netstart.cn/mogujie/hotSearch.json')
        .then(({ data }) => {
            hotArr.value = data.data.hotWord.data.map((i: HotListType) => {
                return {
                    color: i.color,
                    frontword: i.frontword
                }
            })
            // console.log(data.data.hotWord.data);
        })
}

const getList = () => {
    if (frontwordSty.value) {
        // frontwordSty.value = refs.value.value
        console.log(frontwordSty.value);


        const index = historyList.value.findIndex(ele => {
            return ele == frontwordSty.value;
        });
        // //如果有的话就删除重复
        if (index != -1) {
            historyList.value.splice(index, 1);
        }
        // //向数组第一位添加
        historyList.value.unshift(frontwordSty.value);
        // // 本地存储历史记录数组
        localStorage.historyList = JSON.stringify(historyList.value);
        router.push({ path: '/goods', query: { frontword: frontwordSty.value } })
        // frontwordSty.value = ''
    }


}

const hotList = (item: string) => {
    querys.value = item
    const index = historyList.value.findIndex(ele => {
        return ele == querys.value;
    });
    // //如果有的话就删除重复
    if (index != -1) {
        historyList.value.splice(index, 1);
    }
    // //向数组第一位添加
    historyList.value.unshift(querys.value);
    // // 本地存储历史记录数组
    localStorage.historyList = JSON.stringify(historyList.value);
    router.push({ path: '/goods', query: { frontword: querys.value } })
}

const del = () => {
    nextTick(() => {
        localStorage.removeItem('historyList');
        historyList.value = [];
    })
}

onMounted(() => {
    getHotList()
    const history = localStorage.historyList;
    if (history) {
        // 将数组转字符串
        historyList.value = JSON.parse(history);
    }
})


</script>


<template>
    <div>
        <div class="search-bar">
            <div class="search-back" @click="$router.push({ path: '/home' })"></div>
            <div class="input">
                <input type="search" ref="value" placeholder="ins超火短t" v-model.trim="frontwordSty">
            </div>
            <div class="search" @click="getList()">搜索</div>
        </div>
    </div>

    <div class="history-box">
        <div class="history">
            <div class="history-search-box">
                <i></i>
                <div class="history-search">历史搜索</div>
            </div>
            <div class="remove-history" @click="del"></div>
        </div>

        <div class="list">
            <div class="history-list" v-for="(a, i) in historyList" :key="i" @click="hotList(a)">{{ a }}</div>
        </div>
    </div>


    <div class="hot">
        <div class="hot-img">
            <i></i>
            <div class="hot-search">热门搜索</div>
        </div>
        <div class="hot-list">
            <div class="hot-item" v-for="(h, i) in hotArr" :key="i" :style="{ color: h.color ? h.color : '' }"
                @click="hotList(h.frontword)">{{
        h.frontword
                }}</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.search-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 5px;
    background: #fff;

    .search-back {
        width: 25px;
        height: 20px;
        background-image: url(@/assets/img/return.png);
        background-size: 25px 20px;
        background-position: center center;
        background-repeat: no-repeat;
    }

    input {
        width: 295px;
        height: 30px;
        padding-left: 5px;
        border-radius: 6px;
    }

    input:focus {
        border-style: solid;
        border-color: #FF4466;
        box-shadow: 0 0 15px #FF4466;
    }
}


.history-box {
    // display: flex;
    // justify-content: space-between;
    width: 100vw;
    height: 170px;
    margin-top: 10px;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;

    .history {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 5px 0 0 5px;


        .history-search-box {
            display: flex;

            i {
                display: block;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/img/search.png);
                background-size: 20px 20px;
                background-position: center center;
            }
        }
    }

    .list {
        display: flex;
        flex-wrap: wrap;

        .history-list {
            flex: 0 0 26%;
            height: 32px;
            line-height: 32px;
            padding: 3px 5px;
            margin-left: 22px;
            text-align: center;
            background-color: #eee;
            border-radius: 6px;
            margin-top: 6px;
            white-space: nowrap;
        }
    }



    .remove-history {
        display: block;
        width: 20px;
        height: 20px;
        margin: 5px 5px 0 0;
        background-image: url(@/assets/img/shanchu.png);
        background-size: 20px 20px;
        background-position: center center;
    }
}

.hot {
    margin-top: 15px;

    .hot-img {
        display: flex;
        align-items: flex-end;
        margin-left: 5px;

        i {
            display: block;
            width: 20px;
            height: 20px;
            margin: 5px 5px 0 0;
            background-image: url(@/assets/img/xingxing.png);
            background-size: 20px 20px;
            background-position: center center;
        }
    }

    .hot-list {
        display: flex;
        flex-wrap: wrap;

        .hot-item {
            flex: 0 0 26%;
            text-align: center;
            margin-top: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            margin-left: 22px;
            background-color: #eee;

        }
    }
}
</style>